<template>
  <div class="my-content">
    <div class="cate-left">
      <div class="lwrapper" ref="lwrapper">
        <ul class="lcontent" :class="[selectClass]">
          <li
            v-for="(item, index) in category"
            :class="{ active: currentIndex === index }"
            :key="index"
            ref="lmenu"
            @click="redirects(index, $event)"
          >
            <a>{{ item.cate }}</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="cate-right">
      <div class="wrapper" ref="wrapper" id="mui-scroll-w">
        <ul class="content">
          <li
            v-for="item in category"
            :key="item.id"
            class="viewBox"
            ref="rmenu"
          >
            <h4>{{ item.cate }}</h4>
            <div class="cate-content" :id="'content' + item.id"></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import $ from "jquery";
import Bscroll from "better-scroll";
export default {
  data() {
    return {
      category: [],
      selectClass: "",
      heightIndex: [],
      totalHeight: [],
      thisIndex: 0,
      thisScroll: "",
      scroll: "",
      scrollY: 0,
      meunScroll: "",
    };
  },
  computed: {
    currentIndex() {
      for (let i = 0; i < this.totalHeight.length; i++) {
        let height1 = this.totalHeight[i];
        let height2 = this.totalHeight[i + 1];
        let height3 = this.totalHeight[this.totalHeight.length - 1];
        let height4 = this.totalHeight[this.totalHeight.length - 2];
        let height5 = this.totalHeight[this.totalHeight.length - 3];
        let height6 = this.totalHeight[this.totalHeight.length - 4];
        let cheight = this.$refs.wrapper.clientHeight;
        if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
          this._followScroll(i);
          return i;
        }
        if (this.scrollY > height5 + 40) {
          return this.totalHeight.length - 2;
        }
      }
      return 0;
    },
  },
  methods: {
    //请求存储在本地的分类数据
    getCategory() {
      let _this = this;
      //axios请求的本地json文件要放最外层的文件夹中
      axios
        .get("http://localhost:8081/static/category.json")
        .then((response) => {
          this.category = response.data.data;
          //console.log(_this.category);
          this.$nextTick(() => {
            this._initScroll();
          });
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    //点击分类滚动到指定位置
    redirects(index, event) {
      if (!event._constructed) {
        return;
      }
      let rmenu = this.$refs.rmenu;
      let el = rmenu[index];
      this.scroll.scrollToElement(el, 250);
    },
    //获取每个分类对应的内容区域的高度,用数组保存
    getHeight() {
      var arr = [];
      $(".viewBox").each(function (index, item) {
        var indexHeight = $(".viewBox").eq(index).outerHeight();
        arr.push(indexHeight);
      });
      this.heightIndex = arr;
    },
    //获取每个分类对应内容的滚动高度(累计滚动高度)
    getTotalHeight() {
      var s = 0;
      var arr = [];
      arr.push(s); //第一个为0
      this.heightIndex.forEach((item, index) => {
        s += this.heightIndex[index];
        arr.push(s);
      });
      this.totalHeight = arr;
    },
    //滚动内容区域,对应分类高亮
    _initScroll() {
      if (!this.scroll) {
        this.scroll = new Bscroll(this.$refs.wrapper, {
          probeType: 3, //监听滚动事件
          click: true, //bs默认阻止click事件，要给它派一个
        });
        //console.log(this.scroll);
        this.scroll.on("scroll", (pos) => {
          this.scrollY = parseInt(Math.abs(pos.y));

          this.getHeight();
          this.getTotalHeight();
          //console.log(this.totalHeight);
          //console.log(this.scrollY);
        });
      } else {
        this.scroll.refresh();
      }
      this.meunScroll = new Bscroll(this.$refs.lwrapper, {
        probeType: 3,
        click: true,
      });
    },
    _followScroll(index) {
      let lmenu = this.$refs.lmenu;
      let el = lmenu[index];
      this.meunScroll.scrollToElement(el, 250, 0, -100);
    },
  },
  created() {
    this.getCategory();
  },
  mounted() {},
  updated() {},
};
</script>

<style scoped>
h4 {
  margin: 0;
}
.wrapper,
.lwrapper {
  width: 100%;
  height: 553px;
  overflow: hidden;
  position: absolute;
}
.mui-scroll {
  overflow: auto;
}
* {
  touch-action: none;
}
.active {
  background: #eee;
}
.a0 li:nth-child(1),
.a1 li:nth-child(2),
.a2 li:nth-child(3),
.a3 li:nth-child(4),
.a4 li:nth-child(5),
.a5 li:nth-child(6),
.a6 li:nth-child(7),
.a7 li:nth-child(8),
.a8 li:nth-child(9),
.a9 li:nth-child(10),
.a10 li:nth-child(11),
.a11 li:nth-child(12),
.a12 li:nth-child(13) {
  background: #eee;
}
.my-content {
  overflow: hidden;
  position: absolute;
  top: 64px;
  bottom: 50px;
  left: 0;
  width: 100%;
  background: #eee;
  padding-top: 10px;
}
.cate-left {
  width: 80px;
  height: 100%;
  float: left;
  background: #fff;
  position: relative;
}
.cate-left li a {
  display: block;
  color: #888;
  padding: 15px 6px;
  text-align: center;
  font-size: 15px;
}
.cate-right {
  margin-left: 90px;
  height: 100%;
  position: relative;
}
.viewBox {
  box-sizing: border-box;
}
.cate-right h4 {
  font-size: 15px;
  color: #888;
  padding: 13px 0;
}
.mui-scroll-wrapper {
  position: absolute;
}
.mui-scroll {
  position: absolute;
}
.cate-content {
  height: 300px;
  background: #fff;
}
</style>